<template>
    <div class="section-wrap">
        <div class="form-section">

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>单位</label>
                </div>
                <group>
                    <div class="right-select"
                         @click="selectType">
                        {{formData.departName?formData.departName:"请选择"}}
                        <i class="iconfont icon-jinru rightmsg"
                           v-if="role==2"></i>
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>有效期</label>
                </div>
                <group>
                    <datetime v-model="formData.endTime"
                              @on-change="onChange"></datetime>
                </group>
            </div>
            <div class="imgbox">
                <img class="qrcodeImg"
                     :src="url"
                     v-if="url" />
                <img class="qrcodeImg"
                     src="../../../assets/nopic.png"
                     v-else/>
                <div style="margin-top:10px;text-align: center;font-size:14px;color:#999;">
                    <span>长按图片保存到本地</span>
                </div>

                <div class="btns">
                    <button @click="showCodeDialog">生成二维码</button>
                </div>
            </div>
            <myMenu :addPath="addPath"></myMenu>
        </div>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"
                     business="GetQrDeptByDeptId"></companyProp>
    </div>
</template>
<script>
import formatDate from '@/utils/formatDate'
import { XDialog, TransferDom } from 'vux'
import { qrcodeInfo, qrcodeSave } from '@/api/api'
import myMenu from '@/commonComponents/menu'
import companyProp from '@/commonComponents/companyProp'
const config = require('../../../../config')

export default {
    directives: {
        TransferDom
    },
    data () {
        return {
            role: '2',
            url: '',
            isFrist: true,
            departID: '',
            formData: {
                endTime: '2019-01-01',
                departID: '',
                departName: '',
                account: ''
            },
            showDialog: false,
            addPath: '',
            companyPropShow: false // 选择单位弹框
        }
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        // let model = {}
        // if (localStorage.getItem('codeMsg')) {
        //     this.formData = JSON.parse(localStorage.getItem('codeMsg'))
        //     model = {
        //         Id: this.$store.state.checkcompany.Id,
        //         Name: this.$store.state.checkcompany.Name
        //     }
        //     localStorage.removeItem('codeMsg')
        // } else {
        //     let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        //     model = {
        //         Id: userInfo.deptid,
        //         Name: userInfo.deptname
        //     }
        // }
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        if (userInfo.departsir == '1' || userInfo.departsir == '2') {
            this.addPath = '/enteringUser'
        }
        this.formData.account = userInfo.account
        this.departID = userInfo.deptid
        // this.$store.state.checkcompany = model
        // this.formData.departID = this.$store.state.checkcompany.Id
        // this.formData.departName = this.$store.state.checkcompany.Name
    },
    components: {
        XDialog,
        TransferDom,
        myMenu,
        companyProp
    },
    methods: {
        onChange () {
            if (!this.isFrist) {
                this.url = null
            }
            this.isFrist = false
        },
        selectType () {
            // this.url = null
            // localStorage.setItem('codeMsg', JSON.stringify(this.formData))
            // this.$router.push({ path: '/addCompany2', query: { departId: this.departID } })
            this.companyPropShow = true
        },
        qrcode (qrcodeId) {
            // 使用js原生方法清空元素内容
            let origin = config.domain
            let params = {
                id: qrcodeId,
                url: origin,
                time: this.formData.endTime,
                deptname: this.formData.departName,
                deptid: this.formData.departID,
                useraccount: this.formData.account
            }
            qrcodeSave({ data: params }).then((res) => {
                if (res.code === 0) {
                    this.url = res.imgurl
                } else {
                    console.log(res, 123)
                }
            })
        },
        showCodeDialog () {
            if (!this.formData.departID) {
                this.$vux.toast.text('请选择单位')
                this.show = false
                return false
            }
            if (!this.formData.endTime) {
                this.$vux.toast.text('请选择有效期')
                this.show = false
                return false
            }
            this.showDialog = true
            this.qrcode(null)
        },
        selectCompany (item) {
            this.formData.departID = item.Id
            this.formData.departName = item.Name
            this.companyPropShow = false
            qrcodeInfo({ data: this.formData.departID }).then((res) => {
                if (res.code === 0) {
                    this.formData.endTime = res.data.qrtime
                    this.url = res.data.url
                } else {
                    let year = formatDate().split('-')[0]
                    let month = parseInt(formatDate().split('-')[1]) + 1
                    if (month > 12) {
                        month = '01'
                        year = parseInt(year) + 1
                    } else if (month < 10) {
                        month = '0' + month
                    }
                    this.formData.endTime = year + '-' + month + '-' + formatDate().split('-')[2]
                }
            }).finally(() => {
                this.$vux.loading.hide()
            })
        }
    }
}
</script>
<style lang="less" scoped>
.form-section .imgbox {
    position: relative;
    margin: 50px 60px 10px auto;
    width: 250px;
    height: 250px;
    border: solid 1px #efeff4;
    text-align: center;
    .qrcodeImg {
        margin: 25px;
        width: 200px;
        height: 200px;
    }
}

.right-select {
    font-size: 14px;
    color: #999;
    padding-right: 0px;
    height: 20px;
    overflow: hidden;
    width: 180px;
    position: relative;
    padding-right: 0px;
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-jinru {
    color: #c8c8cd;
}

.right-select {
    font-size: 14px;
    color: #999;
}

.lookmsg {
    color: #2269ff;
}
</style>
